<template>
    <div class="form-style-box">
        <ul class="outer-box">
            <li class="group-attribute-name"
                @click="groupName=!groupName">
                <i class="group-icon" :class="groupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span>按钮样式</span>
            </li>
            <ul class="inner-box" :class="{'h0': !groupName}">
                <li class="attr-item">
                    <ColorPicker :options="appearance.bgColor" :config="{width: 56,labelName: '背景色'}"/>
                </li>
                <li class="attr-item ">
                    <ColorPicker :options="appearance.color" :config="{width: 56,labelName: '文字色'}"/>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">圆角</div>
                    <div class="block">
                        <el-input v-model="appearance.radius" size="mini" type="number"/>
                    </div>
                </li>
            </ul>
        </ul>
    </div>
</template>

<script>
    import ColorPicker from '../common/contentstyle/ColorPicker.vue';

    export default {
        name: 'FormStyle',
        props: {
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        radius: '4',
                        bgColor: {
                            color: 'rgba(248, 89, 89, 1)'
                        },
                        color: {
                            color: 'rgba(255, 255, 255, 1)'
                        }
                    };
                }
            }
        },
        components: {
            ColorPicker
        },
        data() {
            return {
                groupName: true
            };
        }
    }
</script>

<style scoped lang="scss">
    $color-409EFF: #409EFF;

    .form-style-box {
        @import '../../../styles/init.scss';
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, .15);

        .outer-box {
            .h0 {
                height: 0 !important;
                overflow: hidden;
            }
            .group-attribute-name {
                height: 20px;
                width: fit-content;
                user-select: none;
                color: #999;
                cursor: pointer;

                .group-icon {
                    font-size: 18px;
                }
            }
            .inner-box {
                height: 144px;
                overflow: hidden;
                transition: height .2s;

                .attr-item {
                    height: 38px;
                    display: flex;
                    justify-content: space-between;
                    overflow: hidden;
                    margin-top: 10px;

                    .attr-item-label {
                        padding-right: 12px;
                        line-height: 38px;
                    }
                    .block {
                        width: calc(100% - 56px);
                        line-height: 38px;
                    }
                }
            }
        }
    }
</style>
